<template>
  <div class="article-list-container">
    <div v-if="loading" class="loading">
      <i class="fas fa-spinner fa-spin"></i> 加载中...
    </div>
    
    <div v-else-if="articles.length === 0" class="empty-state">
      <i class="fas fa-folder-open"></i>
      <p>{{ emptyMessage || '暂无文章' }}</p>
    </div>
    
    <div v-else class="articles-list">
      <div 
        v-for="article in articles" 
        :key="article.id" 
        class="article-item"
        @click="handleArticleClick(article)"
      >
        <div class="article-main">
          <div class="article-header">
            <div class="title-section">
              <h3 class="article-title">
                <i class="fas fa-file-alt"></i>
                {{ article.title }}
              </h3>
              <div v-if="article.categories" class="category-tags">
                <span 
                  v-for="category in getCategoryList(article.categories)" 
                  :key="category"
                  class="category-tag"
                  @click.stop="goToCategory(category)"
                >
                  {{ getCategoryLabel(category) }}
                </span>
              </div>
            </div>
          </div>
          <div class="article-preview">
            {{ getExcerpt(article.content) }}
          </div>
          <div class="article-meta">
            <span class="meta-item">
              <i class="fas fa-user"></i>
              {{ getAuthorName(article.authorId) }}
            </span>
            <span class="meta-item">
              <i class="fas fa-clock"></i>
              {{ formatDate(article.createdAt) }}
            </span>
            <span v-if="article.likeCount !== undefined" class="meta-item stats-item like-stats">
              <i class="fas fa-heart"></i>
              {{ article.likeCount || 0 }}
            </span>
            <span v-if="article.commentCount !== undefined" class="meta-item stats-item comment-stats">
              <i class="fas fa-comments"></i>
              {{ article.commentCount || 0 }}
            </span>
            <button class="read-more-btn" @click.stop="handleArticleClick(article)">
              <i class="fas fa-arrow-right"></i>
              阅读全文
            </button>
          </div>
        </div>
        <div class="article-icon">
          <i :class="getRandomIcon(article)" class="random-icon"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  props: {
    articles: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    users: {
      type: Array,
      default: () => []
    },
    categories: {
      type: Array,
      default: () => []
    },
    emptyMessage: {
      type: String,
      default: '暂无文章'
    }
  },
  emits: ['article-click', 'category-click'],
  methods: {
    handleArticleClick(article) {
      this.$emit('article-click', article)
    },
    
    goToCategory(categoryValue) {
      this.$emit('category-click', categoryValue)
    },
    
    getAuthorName(authorId) {
      const user = this.users.find(u => u.id === authorId)
      return user ? (user.fullName || user.username) : '未知作者'
    },
    
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    },
    
    getExcerpt(content) {
      if (!content) return ''
      const text = content.replace(/<[^>]*>/g, '')
      return text.length > 120 ? text.substring(0, 120) + '...' : text
    },
    
    getCategoryList(categories) {
      if (!categories) return []
      return categories.split(',').map(c => c.trim()).slice(0, 3) // 最多显示3个分类
    },
    
    getCategoryLabel(categoryValue) {
      const category = this.categories.find(c => c.dictValue === categoryValue)
      return category ? category.dictLabel : categoryValue
    },
    
    formatCategories(categories) {
      if (!categories) return ''
      const categoryList = categories.split(',').map(c => c.trim())
      return categoryList.slice(0, 2).join(', ') + (categoryList.length > 2 ? '...' : '')
    },
    
    getRandomIcon(article) {
      // 根据文章ID生成一致的随机图标 - 使用 Font Awesome 4 中确实存在的图标
      const icons = [
        'fa fa-rocket', 'fa fa-star', 'fa fa-fire', 'fa fa-bolt',
        'fa fa-heart', 'fa fa-sun', 'fa fa-moon', 'fa fa-leaf',
        'fa fa-gift', 'fa fa-globe', 'fa fa-compass', 'fa fa-key',
        'fa fa-lightbulb-o', 'fa fa-coffee', 'fa fa-gamepad', 'fa fa-music',
        'fa fa-camera', 'fa fa-film', 'fa fa-bookmark', 'fa fa-flag',
        'fa fa-bell', 'fa fa-clock-o', 'fa fa-calendar', 'fa fa-bug',
        'fa fa-code', 'fa fa-database', 'fa fa-desktop', 'fa fa-envelope',
        'fa fa-exclamation', 'fa fa-eye', 'fa fa-folder', 'fa fa-graduation-cap',
        'fa fa-home', 'fa fa-info', 'fa fa-laptop', 'fa fa-lock',
        'fa fa-map-marker', 'fa fa-mobile', 'fa fa-paper-plane', 'fa fa-search',
        'fa fa-server', 'fa fa-shield', 'fa fa-shopping-cart', 'fa fa-smile-o',
        'fa fa-tablet', 'fa fa-tags', 'fa fa-thumbs-up', 'fa fa-university',
        'fa fa-user', 'fa fa-users', 'fa fa-video-camera', 'fa fa-wifi',
        'fa fa-cube', 'fa fa-cubes', 'fa fa-certificate', 'fa fa-diamond',
        'fa fa-trophy', 'fa fa-gem', 'fa fa-crown', 'fa fa-flask',
        'fa fa-magic', 'fa fa-book', 'fa fa-file', 'fa fa-folder-open',
        'fa fa-download', 'fa fa-upload', 'fa fa-link', 'fa fa-unlink',
        'fa fa-plus', 'fa fa-minus', 'fa fa-times', 'fa fa-check'
      ]
      
      // 使用更复杂的散列算法，增加随机性
      let hash = 0
      const str = article.id.toString()
      for (let i = 0; i < str.length; i++) {
        const char = str.charCodeAt(i)
        hash = ((hash << 5) - hash) + char
        hash = hash & hash // 转换为32位整数
      }
      
      // 添加额外的散列因子
      const timestamp = article.createdAt ? new Date(article.createdAt).getTime() : 0
      hash = hash ^ (timestamp >>> 0)
      
      // 确保散列值为正数
      hash = Math.abs(hash)
      
      const iconIndex = hash % icons.length
      return icons[iconIndex]
    }
  }
}
</script>

<style scoped>
.article-list-container {
  width: 100%;
}

.loading, .empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  color: var(--color-primary);
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.article-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all var(--transition-normal);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.article-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(92, 225, 255, 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
}

.article-main {
  flex: 1;
  padding: 1.25rem 1.5rem;
}

.article-header {
  margin-bottom: 0.75rem;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.article-title {
  font-size: 1.05rem;
  color: #f0f4f8;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  transition: all var(--transition-fast);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.article-title i {
  color: #81c784;
  font-size: 0.9rem;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.article-item:hover .article-title {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.article-status {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-md);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.article-status.published {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%);
  color: white;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(76, 175, 80, 0.4);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.article-preview {
  color: #d1d5db;
  line-height: 1.5;
  margin-bottom: 0.65rem;
  font-size: 0.875rem;
  opacity: 0.95;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.8rem;
  color: #c7d2da;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.9;
}

.meta-item i {
  font-size: 0.75rem;
  opacity: 0.8;
}

.stats-item {
  font-weight: 600;
}

/* 点赞数图标和文字颜色 - 红色 */
.like-stats {
  color: #e74c3c !important;
}

.like-stats i {
  color: #e74c3c !important;
  opacity: 1 !important;
}

/* 评论数图标和文字颜色 - 亮蓝色 */
.comment-stats {
  color: #00bfff !important;
}

.comment-stats i {
  color: #00bfff !important;
  opacity: 1 !important;
}

.read-more-btn {
  background: none;
  color: #4caf50;
  padding: 0.3rem 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  transition: all var(--transition-normal);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
  text-decoration: none;
}

.read-more-btn:hover {
  color: #66bb6a;
  transform: translateX(3px);
}

.read-more-btn i {
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
}

.read-more-btn:hover i {
  transform: translateX(3px);
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.category-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  color: white;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(64, 158, 255, 0.6);
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.9) 0%, rgba(100, 181, 246, 0.8) 100%);
  backdrop-filter: blur(5px);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
}

.category-tag:hover {
  color: white;
  border-color: rgba(100, 177, 255, 0.8);
  background: linear-gradient(135deg, rgba(100, 177, 255, 1) 0%, rgba(144, 202, 249, 0.9) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.5);
}

.article-icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  margin-right: 1.5rem;
  transition: all var(--transition-normal);
  position: relative;
}

.article-item:hover .article-icon {
  transform: scale(1.1) rotate(5deg);
  border-color: rgba(92, 225, 255, 0.6);
  box-shadow: 0 8px 25px rgba(92, 225, 255, 0.3);
}

.random-icon {
  font-size: 3rem;
  background: var(--gradient-rainbow);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
  animation: rainbowShift 3s ease-in-out infinite;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.article-item:hover .random-icon {
  animation: rainbowShift 1.5s ease-in-out infinite;
  transform: scale(1.1);
  filter: brightness(1.2);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .article-item {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
  
  .article-main {
    padding: 1rem;
  }
  
  .article-icon {
    width: 80px;
    height: 80px;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .random-icon {
    font-size: 2.5rem;
  }
}
</style>
